<template>
  <div class="div1">
   <h2>父组件</h2>
    <div class="content">
      <TongXin9Child1>
        <template #default>
          <p>子组件内容1</p>
        </template>
      </TongXin9Child1>
      <TongXin9Child1>
        <template #default>
          <p>子组件内容2</p>
        </template>
      </TongXin9Child1>
      <TongXin9Child1>
        <template #default>
          <p>子组件内容3</p>
        </template>
      </TongXin9Child1>
      <TongXin9Child1>
        <!-- 一般使用 #header -->
        <template v-slot:header>
          <h3>子组件头部</h3>
        </template>
        <template v-slot:default>
          <p>子组件内容4</p>
        </template>
        <template v-slot:footer>
          <h3>子组件底部</h3>
        </template>
      </TongXin9Child1>
      <TongXin9Child1>

        <!-- <template #sidebar="params"> -->
          <template #sidebar="{youxi, title}">
            <h3>{{ title }}</h3>
            <ul>
              <li v-for="game in youxi" :key="game.id">
                <strong>{{ game.name }}</strong>: {{ game.description }}
              </li>
            </ul>
        </template>
      </TongXin9Child1>
    </div>
  </div>
</template>
<script setup lang="ts">
import TongXin9Child1 from './TongXin9Child1.vue';



</script>
<style lang="scss" scoped>
.div1 {
  background-color: #f5f5f5;
  padding: 20px;
  border: 1px solid #eee;
}
.content {
  display: flex;
  justify-content: space-between;
}
</style>
